<template>
  <TabsDialog ref="tabsDialogRef" :tabs="activeTab" :fieldInfo="fieldInfo" :tabs-type="type" :dialog-config="dialogConfig" :rules="loginRules">
    <!--标题部分-->
    <template #header>
      <div class="header-container">
        <img src="@/assets/logo_black.png" class="logo-image" />
        <div class="title">登录</div>
      </div>
    </template>
    <template #append-code>
      <el-button type="primary" class="send">发送验证码</el-button>
    </template>
    <!--页尾部分-->
    <template #footer>
      <div class="button-container">
        <el-button type="primary" @click="jumpRegister" link class="immediately">没有账号？立即注册</el-button>
        <el-button type="primary" @click="handleLogin" class="handleLogin">登录</el-button>
      </div>
      <div class="agreement-container">
        <p class="agreement">登录即代表同意</p>
        <el-button type="primary" link>《编程智航用户协议》</el-button>
      </div>
    </template>
  </TabsDialog>
</template>
<script setup>
import TabsDialog from '@/components/tabsdialog/TabsDialog.vue'
import { ref, inject } from 'vue'
import { useLoginRegStore } from '@/stores/user/loginreg/index.js'
import { useUserStore } from '@/stores/user.js'
import { ElMessage } from 'element-plus'
import router from '@/router'
/* 传递给子组件的变量 */
//弹窗大小设置
const dialogConfig = {
  dialogHeight: '440px',
  dialogWidth: '370px',
  tabSize: '16px'
}
const type = ref('')
// 选项卡名称及内容
const activeTab = ref([
  {
    label: '手机号登录',
    fieldConfig: [
      { type: 'input', prop: 'phone', label: '手机号', width: '90%', placeholder: '请输入手机号' },
      { type: 'input', prop: 'phonePassword', label: '密码', width: '90%', placeholder: '请输入密码', isPassword: true }
      // { type: 'input', prop: 'code', label: '验证码', width: '45%', placeholder: '请输入验证码', showAppendSlot: true }
    ]
  },
  {
    label: '用户名登录',
    fieldConfig: [
      { type: 'input', prop: 'userName', label: '用户名', width: '90%', placeholder: '请输入用户名' },
      { type: 'input', prop: 'password', label: '密码', width: '90%', placeholder: '请输入密码', isPassword: true }
    ]
  }
])
//登录验证规则
const loginRules = {
  phone: [
    { required: true, message: '请输入手机号', tigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  phonePassword: [
    { required: true, message: '请输入密码', tigger: 'blur' },
    { pattern: /.{6,}/, message: '请输入至少六位字符作为密码', trigger: 'blur' }
  ],
  userName: [
    { required: true, message: '请输入用户名', tigger: 'blur' },
    { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{4,10}$/, message: '长度为4-10个字符,只包含字母、数字和汉字', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', tigger: 'blur' },
    { pattern: /.{6,}/, message: '请输入至少六位字符作为密码', trigger: 'blur' }
  ]
}
const fieldInfo = ref({ phone: '', phonePassword: '', password: '', userName: '' }) // 字段信息

const tabsDialogRef = ref(null) // ref响应式数据
// 打开弹窗
const openLoginDialog = () => {
  tabsDialogRef.value.openDialog()
}
/* 暴露的方法 */
defineExpose({
  openLoginDialog
})
/* 本界面变量即函数 */
const loginRegStore = useLoginRegStore() // 获取登录注册的方法
const userStore = useUserStore() // 获取token相关方法
const openRegister = inject('openRegister') // 注入打开注册弹窗方法
// 跳转注册页面
const jumpRegister = () => {
  tabsDialogRef.value.closeDialog()
  openRegister()
}
// 登录处理
const handleLogin = async () => {
  const loginData = await tabsDialogRef.value.submitForm() // 获得登录表单数据
  if (!loginData) {
    ElMessage.error('请先通过表单验证')
    return
  }
  loginRegStore
    .postLogin(loginData) // 发送api请求
    // 通过解构赋值获得msg和token
    .then(async ({ msg, data: token }) => {
      if (token) {
        userStore.setToken(token) // 设置token
        await userStore.loadUser() // 加载用户信息
        userStore.setLoaded(true) // 表示加载完成
        ElMessage.success('登录成功')
        tabsDialogRef.value.closeDialog()
      } else {
        ElMessage.error(msg || '登录失败(请联系管理员)')
      }
    })
    .catch((error) => {
      ElMessage.error(error.msg || '登录失败(请联系管理员)')
      // console.log(error)
    })
}
</script>
<style scoped>
.header-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: -10px; /* 减少标题和分割线之间的距离 */
}
.logo-image {
  width: 50px; /* 设置图片宽度，可以根据需要调整 */
  height: auto; /* 设置自动计算高度，保持宽高比 */
  margin-right: 90px; /* 设置图片与标题之间的右侧间距 */
}
.title {
  font-size: 20px; /* 设置标题字体大小，可以根据需要调整 */
}
.agreement-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.agreement {
  margin-left: 32px; /* 可以根据需要调整段落之间的间距 */
  margin-right: 5px;
  font-size: 14px;
  color: #999;
  cursor: pointer;
}
.send {
  margin-left: 10px; /* 调整发送验证码按钮与文本框之间的距离 */
}
.button-container {
  margin-top: -40px; /* 负的上边距值，使按钮往上移动 */
}

.handleLogin {
  margin-left: 0; /* 移除原有的左边距 */
  margin-right: 25px; /* 添加右边距 */

  font-size: 14px; /* 设置按钮字体大小 */
  padding: 20px 126px; /* 设置按钮内边距，即按钮大小 */
}
.immediately {
  margin-right: 20px;
  margin-bottom: 10px;
}
</style>
